{% extends "index.html" %}

{% block before %}
<div class="modal fade bd-example-modal-lg" id="notice-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" style="display: none;" aria-modal="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle"><b id="modal-title"></b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block main %}
{% for type, notices in (('个人通知', personal), ('班级通知', cls), ('学校通知', school)) %}
{% if notices %}
<div class="card">
    <div class="card-body pt-3">
        {% for notice in notices %}
        <div class="col-sm-12 mt-0 list-item pl-0 pr-0 d-flex" data-toggle="modal" data-target="#notice-modal" onclick="initModal('{{notice['title']}}', '{{notice['content']}}', {{notice['sender']}})">
             <div class="content-div mr-3">
                 <h4 class="text-black mb-1">{{ notice['title'] }}</h4>
                 <h5>{{ type }}</h5>
                 <span>过期于{{ notice['deadtime'] }}</span>
             </div>
             <i class="ti-close mt-2 text-red"></i>
         </div>
         {% endfor %}
    </div>
</div>
{% endif %}
{% endfor %}
<script>
    function initModal(title, content, sender) {
        $(".modal-body").html(`<h2>${title}</h2><p>${content}</p><small>来自${sender}</small>`);
    }
</script>
{% if 84|authorized %}
<div id="floating-button">
    <a class="plus" href="/notice/send">+</a>
</div>
{% endif %}
{% endblock %}